<template>
  <div class="three-circles">
    <threeCircles
      ref="threeCircles"
      :line-symbol-color="lineSymbolColor"
      :line-symbol-width="lineSymbolWidth"
      :line-symbol-style="lineSymbolStyle"
      :rings="rings"
      :pointDataStr="pointDataStr"
      @graphicJSON="graphicJSON"
      @addPointData="addPointData">
    </threeCircles>

    <div class="form-ul">
      |<input type="color" v-model="lineSymbolColor">{{lineSymbolColor}}
      |<input type="text" v-model="lineSymbolWidth">{{lineSymbolWidth}}
      |<input type="text" v-model="lineSymbolStyle">{{lineSymbolStyle}}
      <button @click="addClick">新增</button>
      <button @click="searchClick">预览</button>
      <ul  v-show="graphicsItems.length > 0">
        <li  v-for="item in graphicsItems"  >
          <button @click="liClick(item.uid)" >删除</button>纬度：<span v-text="item.longitude"></span>
          经度：<span v-text="item.latitude"></span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import threeCircles from './threeCircles/threeCircles';
  export default {
    name: "threeCirclesControllerDev",
    data(){
      return {
        graphicsItems: [],
        data:[],
        lineSymbolColor: '#ff0000',
        lineSymbolWidth: '4',
        lineSymbolStyle: 'solid',
        objectId: null,
        searchObjectId: 0,
        rings: null,
        pointDataStr:''
      }
    },
    components:{
      threeCircles
    },
    methods: {
      // 获取地图点位数组
      addPointData(graphicsItems){
        this.graphicsItems = graphicsItems
      },
      // 获取点击点
      liClick(uid){
        this.$refs.threeCircles.deletePoint(uid);
        //console.log(uid)
      },
      graphicJSON(json){
        json.attributes["Name"] = "name";
        this.data = [
          {
            "geometry": json.geometry,
            "attributes": json.attributes
          }
        ];
        //console.log(JSON.stringify(this.data));
      },
      // 新增的时候保存三圈
      addClick(){
        if(this.data.length>0){
          this.$axios({
            method: 'post',
            url: mapFeatureServer + '2/addFeatures', // 1 线 2 圈
            data: 'f=json&features='+JSON.stringify(this.data),
            headers: {"Content-Type": "application/x-www-form-urlencoded"}
          }).then(res => {
              this.objectId = res.data.addResults[0].objectId;
              //console.log(this.objectId);
            })
        }
        else {
          alert('请先画圈')
        }
      },
      searchClick(){
        //where=&objectIds=1212&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson
        this.$axios({
          method: 'post',
          url: mapFeatureServer + '2/query',
          data: 'where=&objectIds='+'1212'+'&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson',
          headers: {"Content-Type": "application/x-www-form-urlencoded"}
        }).then(res => {
          this.rings = res.data.features[0].geometry.rings;
          this.pointDataStr = '[{"uid":284,"latitude":30.584296982942433,"longitude":114.21849630912041,"name":"2143","address":"4333","district":"东湖","phone":"44","covered_area":"66","building_area":"55","birthday":"777","big_image":"","bigDisplayImg":"static/img/upicon.png","bigSelectShow":false,"small_image":"","smallSelectShow":false,"smallDisplayImg":"static/img/upicon.png"}]';
          this.graphicsItems = JSON.parse(this.pointDataStr)
          //console.log(this.rings)
        })
      }
    }
  }
</script>

<style scoped>
  .three-circles {
    width: 800px;
    height: 600px;
  }
  .form-ul {
    position: absolute;
    right: 0;
    top: 76px;
  }

</style>
